<header class="app-header">
<div class="top-bar">
  <div class="top-bar-brand">
    <a href="">
      <img src="/assets/images/brand-inverse.png" height="32" alt="">
    </a>
  </div>
  <div class="top-bar-list">
    <div class="top-bar-item px-2 d-md-none d-lg-none d-xl-none">
      <button class="hamburger hamburger-squeeze" type="button" data-toggle="aside" aria-label="Menu" aria-controls="navigation">
        <span class="hamburger-box">
          <span class="hamburger-inner"></span>
        </span>
      </button>
    </div>
    <div class="top-bar-item top-bar-item-full">
      <div class="top-bar-search">
        <div class="input-group input-group-search">
          <div class="input-group-prepend">
            <span class="input-group-text">
              <span class="oi oi-magnifying-glass"></span>
            </span>
          </div>
          <input type="text" class="form-control" aria-label="Search" placeholder="Search"> </div>
      </div>
    </div>
    <div class="top-bar-item top-bar-item-right px-0 d-none d-sm-flex">
      <ul class="header-nav nav">
        <li class="nav-item dropdown header-nav-dropdown has-notified">
          <a class="nav-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="oi oi-pulse"></span>
          </a>
          <div class="dropdown-arrow"></div>
          <div class="dropdown-menu dropdown-menu-rich dropdown-menu-right">
            <h6 class="dropdown-header stop-propagation">
              <span>Activities
                <span class="badge">(2)</span>
              </span>
            </h6>
            <div class="dropdown-scroll has-scrollable">
              <a href="#" class="dropdown-item unread">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces15.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Jeffrey Wells created a schedule </p>
                  <span class="date">Just now</span>
                </div>
              </a>
              <a href="#" class="dropdown-item unread">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces16.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Anna Vargas logged a chat </p>
                  <span class="date">3 hours ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces17.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Sara Carr invited to Stilearn Admin </p>
                  <span class="date">5 hours ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces18.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Sara Carr updated a project </p>
                  <span class="date">1 day ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces19.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Arthur Carroll created a task </p>
                  <span class="date">1 day ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces20.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Angela Peterson assign a task to you </p>
                  <span class="date">2 days ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/uifaces21.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="text"> Willie Dixon and 3 others followed you </p>
                  <span class="date">2 days ago</span>
                </div>
              </a>
            </div>
            <a href="user-activities.html" class="dropdown-footer">All activities
              <i class="fa fa-fw fa-long-arrow-alt-right"></i>
            </a>
          </div>
        </li>
        <li class="nav-item dropdown header-nav-dropdown has-notified">
          <a class="nav-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="oi oi-envelope-open"></span>
          </a>
          <div class="dropdown-arrow"></div>
          <div class="dropdown-menu dropdown-menu-rich dropdown-menu-right">
            <h6 class="dropdown-header stop-propagation">
              <span>Messages</span>
              <a href="#">Mark all as read</a>
            </h6>
            <div class="dropdown-scroll has-scrollable">
              <a href="#" class="dropdown-item unread">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/team1.jpg" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Stilearning </p>
                  <p class="text text-truncate"> Invitation: Joe's Dinner @ Fri Aug 22 </p>
                  <span class="date">2 hours ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/team3.png" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Openlane </p>
                  <p class="text text-truncate"> Final reminder: Upgrade to Pro </p>
                  <span class="date">23 hours ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="tile tile-circle bg-green"> GZ </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Gogo Zoom </p>
                  <p class="text text-truncate"> Live healthy with this wireless sensor. </p>
                  <span class="date">1 day ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="tile tile-circle bg-teal"> GD </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Gold Dex </p>
                  <p class="text text-truncate"> Invitation: Design Review @ Mon Jul 7 </p>
                  <span class="date">1 day ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="user-avatar">
                  <img src="/assets/images/avatars/team2.png" alt=""> </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Creative Division </p>
                  <p class="text text-truncate"> Need some feedback on this please </p>
                  <span class="date">2 days ago</span>
                </div>
              </a>
              <a href="#" class="dropdown-item">
                <div class="tile tile-circle bg-pink"> LD </div>
                <div class="dropdown-item-body">
                  <p class="subject"> Lab Drill </p>
                  <p class="text text-truncate"> Our UX exercise is ready </p>
                  <span class="date">6 days ago</span>
                </div>
              </a>
            </div>
            <a href="app-messages.html" class="dropdown-footer">All messages
              <i class="fa fa-fw fa-long-arrow-alt-right"></i>
            </a>
          </div>
        </li>
        <li class="nav-item dropdown header-nav-dropdown">
          <a class="nav-link" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            <span class="oi oi-grid-three-up"></span>
          </a>
          <div class="dropdown-arrow"></div>
          <div class="dropdown-menu dropdown-menu-rich dropdown-menu-right">
            <div class="dropdown-sheets">
              <div class="dropdown-sheet-item">
                <a href="#" class="tile-wrapper">
                  <span class="tile tile-lg bg-indigo">
                    <i class="oi oi-people"></i>
                  </span>
                  <span class="tile-peek">Teams</span>
                </a>
              </div>
              <div class="dropdown-sheet-item">
                <a href="#" class="tile-wrapper">
                  <span class="tile tile-lg bg-teal">
                    <i class="oi oi-fork"></i>
                  </span>
                  <span class="tile-peek">Projects</span>
                </a>
              </div>
              <div class="dropdown-sheet-item">
                <a href="#" class="tile-wrapper">
                  <span class="tile tile-lg bg-pink">
                    <i class="fa fa-tasks"></i>
                  </span>
                  <span class="tile-peek">Tasks</span>
                </a>
              </div>
              <div class="dropdown-sheet-item">
                <a href="#" class="tile-wrapper">
                  <span class="tile tile-lg bg-yellow">
                    <i class="oi oi-fire"></i>
                  </span>
                  <span class="tile-peek">Feeds</span>
                </a>
              </div>
              <div class="dropdown-sheet-item">
                <a href="#" class="tile-wrapper">
                  <span class="tile tile-lg bg-cyan">
                    <i class="oi oi-document"></i>
                  </span>
                  <span class="tile-peek">Files</span>
                </a>
              </div>
            </div>
          </div>
        </li>
      </ul>
      <div class="dropdown">
        <button class="btn-account d-none d-md-flex" type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <span class="user-avatar">
            <img src="/assets/images/avatars/profile.jpg" alt="">
          </span>
          <span class="account-summary pr-lg-4 d-none d-lg-block">
            <span class="account-name"><?php echo AbstractModel::read('hp_manager', $_SESSION[APP_NAME]['id'])['firstname'];?> <?php echo AbstractModel::read('hp_manager', $_SESSION[APP_NAME]['id'])['lastname'];?></span>
            <span class="account-description">Marketing Manager</span>
          </span>
        </button>
        <div class="dropdown-arrow dropdown-arrow-left"></div>
        <div class="dropdown-menu">
          <h6 class="dropdown-header d-none d-md-block d-lg-none"> Beni Arisandi </h6>
          <a class="dropdown-item" href="user-profile.html">
            <span class="dropdown-icon oi oi-person"></span> Profile</a>
          <a class="dropdown-item" href="login/out/">
            <span class="dropdown-icon oi oi-account-logout"></span> Logout</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Help Center</a>
          <a class="dropdown-item" href="#">Ask Forum</a>
          <a class="dropdown-item" href="#">Keyboard Shortcuts</a>
        </div>
      </div>
    </div>
  </div>
</div>
</header>